<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>个人中心</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="info">
                <div class="content">
                    <img src="@/assets/img/user.png">
                    <div>
                        <p>{{ userInfo.realName }}</p>
                        <p>账号: {{ userInfo.userId }}</p>
                    </div>
                </div>
            </div>
            <ul>
                <li>
                    <div class="left">
                        <font-awesome-icon :icon="['far', 'calendar-plus']" />
                        <p>我的预约</p>
                    </div>
                    <div class="right" onclick="location.href='appointmentList'">
                        <font-awesome-icon icon="fa-solid fa-angle-right" />
                    </div>
                </li>
                <li>
                    <div class="left">
                        <font-awesome-icon icon="fa-solid fa-user-nurse" />
                        <p>我的服务</p>
                    </div>
                    <div class="right">
                        <font-awesome-icon icon="fa-solid fa-angle-right" />
                    </div>
                </li>
                <li>
                    <div class="left">
                        <font-awesome-icon icon="fa-solid fa-user-doctor" />
                        <p>我的医生</p>
                    </div>
                    <div class="right">
                        <font-awesome-icon icon="fa-solid fa-angle-right" />
                    </div>
                </li>
                <li>
                    <div class="left">
                        <font-awesome-icon icon="fa-solid fa-clipboard-user" />
                        <p>问诊订单</p>
                    </div>
                    <div class="right">
                        <font-awesome-icon icon="fa-solid fa-angle-right" />
                    </div>
                </li>
                <li>
                    <div class="left">
                        <font-awesome-icon icon="fa-solid fa-cart-shopping" />
                        <p>商城订单</p>
                    </div>
                    <div class="right">
                        <font-awesome-icon icon="fa-solid fa-angle-right" />
                    </div>
                </li>
                <li>
                    <div class="left">
                        <font-awesome-icon icon="fa-solid fa-right-from-bracket" />
                        <p>退出登录</p>
                    </div>
                    <div class="right" @click="logout">
                        <font-awesome-icon icon="fa-solid fa-angle-right" />
                    </div>
                </li>
            </ul>
        </section>

        <div class="bottom-ban"></div>
        <Footer />
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import Footer from '@/components/Footer.vue';
import { removeSessionStorage } from '../plugin/common.js';
import { useRouter } from "vue-router";
import { reactive, ref } from 'vue';
import axios from "../plugin/axiosInstance";


const router = useRouter();
const userInfo = reactive({
    realName: null,
    userId: '',
});



const getUserInfo = () => {
    axios.get('/users/getUserDetail').then(res => {
        if (res.data.code == 200) {
            userInfo.realName = res.data.data.realName;
            userInfo.userId = res.data.data.userId;
            userInfo.userId = replaceCharacters(userInfo.userId);
        }
    })
}

const replaceCharacters = (str) => {
    if (str.length < 6) {
        return str;
    }
    return str.slice(0, 3) + '****' + str.slice(7);
}

const logout = () => {
    ElMessageBox.confirm(
        '您确定要退出登录吗?',
        'Warning',
        {
            confirmButtonText: '是的',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            ElMessage({
                type: 'success',
                message: '登出成功!',
            })
            removeSessionStorage('token');
            router.push('/login');
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消登出',
            })
        })

}

const init = () => {
    getUserInfo();
}

init();

</script>

<style scoped>
@import "../assets/css/personal.css";
</style>